<template>
  <div class="test-container">
    <el-card>
      <template #header>
        <span>移动端组件测试</span>
      </template>
      
      <div class="test-section">
        <h3>MobileForm 测试</h3>
        <el-button type="primary" @click="showForm = true">
          打开表单
        </el-button>
        
        <mobile-form
          v-model="showForm"
          title="测试表单"
          :loading="formLoading"
          @confirm="handleFormSubmit"
        >
          <el-form :model="testForm" label-width="80px">
            <el-form-item label="姓名">
              <el-input v-model="testForm.name" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="testForm.email" placeholder="请输入邮箱" />
            </el-form-item>
          </el-form>
        </mobile-form>
      </div>
      
      <div class="test-section">
        <h3>MobileTable 测试</h3>
        <mobile-table
          :data="testData"
          :current-page="1"
          :page-size="10"
          :total="testData.length"
        >
          <template #desktop-table>
            <el-table :data="testData">
              <el-table-column prop="name" label="姓名" />
              <el-table-column prop="email" label="邮箱" />
            </el-table>
          </template>
          
          <template #mobile-card="{ row }">
            <div class="test-card">
              <h4>{{ row.name }}</h4>
              <p>{{ row.email }}</p>
            </div>
          </template>
        </mobile-table>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import MobileForm from '@/components/MobileForm/index.vue'
import MobileTable from '@/components/MobileTable/index.vue'

const showForm = ref(false)
const formLoading = ref(false)

const testForm = reactive({
  name: '',
  email: ''
})

const testData = ref([
  { id: 1, name: '张三', email: 'zhangsan@example.com' },
  { id: 2, name: '李四', email: 'lisi@example.com' },
  { id: 3, name: '王五', email: 'wangwu@example.com' }
])

const handleFormSubmit = async () => {
  formLoading.value = true
  
  // 模拟提交
  await new Promise(resolve => setTimeout(resolve, 1000))
  
  ElMessage.success('提交成功')
  showForm.value = false
  formLoading.value = false
}
</script>

<style scoped>
.test-container {
  padding: 20px;
}

.test-section {
  margin-bottom: 30px;
}

.test-card {
  h4 {
    margin: 0 0 8px 0;
    color: #333;
  }
  
  p {
    margin: 0;
    color: #666;
  }
}
</style>
